<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <h:form id="equipeForm" enctype="multipart/form-data">
                <br/>
                <h3 class="title">Cadastrando Equipe</h3>
                <p:growl id="messages" showDetail="true" autoUpdate="true"  /> 
                <p:panel id="dadosPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Dados Gerais</h4>
                    <p:outputLabel value="Código IES:" styleClass="grid_3" for="codigoInputText" />
                    <p:inputText id="codigoInputText" styleClass="grid_8" 
                                 value="#{ managerCriarEquipe.equipe.codigo }" />
                    <div class="clear"/>

                    <p:outputLabel value="Unidade:" styleClass="grid_3" for="unidadeInputText" />
                    <p:autoComplete id="unidadeInputText" styleClass="grid_20" dropdown="true" converter="unidadeconverter"
                                    var="unidade" itemLabel="#{unidade.nome.concat(' / CNES - ').concat(unidade.codigoCNES)}"
                                    itemValue="#{unidade}" value="#{managerCriarEquipe.equipe.unidade}"
                                    scrollHeight="200" forceSelection="true" required="true" requiredMessage="O campo cidade é obrigatório"
                                    completeMethod="#{managerUtilitario.autocompleteUnidade}"/>
                    <div class="clear-both"/>

                    <p:outputLabel value="Nome:" styleClass="grid_3" for="nomeInputText" />
                    <p:inputText id="nomeInputText" styleClass="grid_19" required="true" requiredMessage="O Campo nome é Obrigatório" 
                                 value="#{ managerCriarEquipe.equipe.nome }" />

                    <p:outputLabel value="Descrição:" styleClass="grid_3" for="descInputText" />
                    <p:inputTextarea id="descInputText" styleClass="grid_19" 
                                     value="#{ managerCriarEquipe.equipe.descricao }" />
                    <div class="clear"/>

                </p:panel>
                <p:panel id="profissionalPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix both ">
                    <h4 class="title">Adicionando Profissionais</h4>
                    <p:commandButton icon="ui-icon-circle-plus" style="float: right" styleClass="grid_4" 
                                     onclick="dialogProfissional.show();" actionListener="#{managerCriarEquipe.instanciarProfissional()}" 
                                     process="@this" update="@this" immediate="true" value="Adicionar" />
                    <br/><br/>
                    <p:dataTable id="profissionalTable" var="item" value="#{managerCriarEquipe.profissionaisSelecionados}" 
                                 styleClass="grid_24" rowIndexVar="rowid"                 
                                 rows="5" paginator="true" lazy="true"    
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 currentPageReportTemplate="{currentPage} de {totalPages}"
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro encontrado"
                                 style="white-space: pre-wrap;">

                        <f:facet name="header">
                            <p:outputLabel value="Profissional" />
                        </f:facet> 
                        <p:column headerText="Ação" width="80">
                            <p:commandButton update=":equipeForm:profissionalTable" process="@this" title="Excluir"
                                             oncomplete="dlg.show()" style="margin-left: -4px"
                                             icon="ui-icon-trash" actionListener="#{managerCriarEquipe.setRemoverProfissional(item)}"/>
                        </p:column>

                        <p:column headerText="Nome" width="400">  
                            <h:outputText value="#{item.nome}" />
                        </p:column>
                        <p:column headerText="Numero SUS">  
                            <h:outputText value="#{item.numeroCartaoSus}"/>
                        </p:column> 
                        <p:column headerText="CPF ">  
                            <h:outputText value="#{item.cpf}"/>
                        </p:column> 

                    </p:dataTable> 

                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:commandButton value="Salvar" icon="ui-icon-disk"
                                     update="@this, :equipeForm:profissionalPanel, :equipeForm:dadosPanel" 
                                     process="@this, :equipeForm:profissionalPanel, :equipeForm:dadosPanel"
                                     actionListener="#{managerCriarEquipe.salvar()}"
                                     styleClass="ui-priority-primary" />

                    <p:button href="pesquisarequipe.xhtml" value="Cancelar"  icon="ui-icon-trash" />
                </div >

                <p:dialog id="profissionalDialog" widgetVar="dialogProfissional" header="Profissional" dynamic="true"
                          modal="true" appendToBody="false" resizable="false" width="90%" height="450px" draggable="false" closable="false">

                    <p:tabView id="profissionalTabView">

                        <p:tab id="pesquisarProfissionalTab" title="Pesquisar Adquirente">

                            <p:panel id="profissionalPesquisarPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Selecionar Profissional</h4>
                                <p:outputLabel value="Nome :" styleClass="grid_3" for="nomeInputText" />
                                <p:inputText id="nomeInputText" styleClass="grid_19" 
                                             value="#{ managerCriarEquipe.profissionalPesquisar.nome }" />
                                <p:outputLabel value="CNES :" styleClass="grid_3" for="cnesInputText" />
                                <p:inputText id="cnesInputText" styleClass="grid_8" 
                                             value="#{ managerCriarEquipe.profissionalPesquisar.codigoCNES }" />
                                <div class="clear"/>
                                <p:outputLabel value="Cartão SUS :" styleClass="grid_3" for="susInputText" />
                                <p:inputText id="susInputText" styleClass="grid_8"  
                                             value="#{ managerCriarEquipe.profissionalPesquisar.numeroCartaoSus }" />
                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton actionListener="#{ managerCriarEquipe.pesquisarProfissional() }" value="Pesquisar"
                                                     update=":equipeForm:profissionalTabView:profissionalPesquisarPanel" process=":equipeForm:profissionalTabView:profissionalPesquisarPanel"
                                                     icon="ui-icon-search" />
                                    <p:commandButton value="Cancelar" icon="ui-icon-cancel" onclick="dialogProfissional.hide()" process="@this"
                                                     update=":equipeForm:profissionalDialog" />
                                </div>
                                <br/>

                                <p:dataTable id="profissionaisDataTable" var="item" value="#{ managerCriarEquipe.profissionaisPesquisar }" 
                                             rows="5" paginator="true" paginatorPosition="bottom" rowKey="#{ item.id }"
                                             selection="#{ managerCriarEquipe.profissionalSelecionado }" selectionMode="single"
                                             emptyMessage="Nenhum profissional encontrado"
                                             style="white-space: pre-wrap;" styleClass="grid_24">

                                    <f:facet name="header">Profissional</f:facet>
                                    <p:ajax event="rowSelect"  process="@this" update="@this"/>

                                    <p:column headerText="Nome" width="70%">
                                        <h:outputText value="#{ item.nome }" />
                                    </p:column>

                                </p:dataTable>

                                <div class="buttonAction"> 
                                    <p:commandButton actionListener="#{ managerCriarEquipe.selecionarProfissional() }"
                                                     update=":equipeForm:profissionalTable, :equipeForm:profissionalDialog" process="@this"
                                                     value="Selecionar" icon="ui-icon-plus" oncomplete="dialogProfissional.hide();" />
                                </div>

                            </p:panel>

                        </p:tab>

                        <p:tab id="cadastrarProfissionalTab" title="Cadastrar Profissional"> 

                            <p:growl id="messages" showDetail="true" autoUpdate="true"  /> 
                            <p:panel id="personPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Dados Gerais</h4>
                                <p:outputLabel value="Nome :" styleClass="grid_3" for="nInputText" />
                                <p:inputText id="nInputText" styleClass="grid_19" required="true" requiredMessage="O Campo nome é Obrigatório" 
                                             value="#{ managerCriarEquipe.profissionalCadastrar.nome }" />
                                <p:outputLabel value="CNES :" styleClass="grid_3" for="cInputText" />
                                <p:inputText id="cInputText" styleClass="grid_8" required="true" requiredMessage="O Campo cnes é Obrigatório" 
                                             value="#{ managerCriarEquipe.profissionalCadastrar.codigoCNES }" />
                                <div class="clear"/>
                                <p:outputLabel value="Cartão SUS :" styleClass="grid_3" for="sInputText" />
                                <p:inputText id="sInputText" styleClass="grid_8" required="true" requiredMessage="O Campo Cartão SUS é Obrigatório" 
                                             value="#{ managerCriarEquipe.profissionalCadastrar.numeroCartaoSus }" />
                                <div class="clear"/>

                                <p:outputLabel value="Tipo Profissional:" styleClass="grid_3" for="tipoOneMenu" />
                                <div class="grid_8">
                                    <p:selectOneMenu id="tipoOneMenu" 
                                                     value="#{ managerCriarEquipe.profissionalCadastrar.tipoProfissional }" >
                                        <f:selectItem  itemValue="" itemLabel=""/>
                                        <f:selectItems value="#{ managerCriarEquipe.tipoProfissional() }" />
                                        <p:ajax update=":equipeForm:profissionalTabView:dadosPanel" process="@this" />
                                    </p:selectOneMenu>
                                </div>
                                <div class="clear"/>
                                <p:panel id="dadosPanel" style="background: none; border: none; padding: 0px;" 
                                         styleClass="container_24 clearfix both ">

                                    <p:panel rendered="#{managerCriarEquipe.profissionalCadastrar.tipoProfissional eq 'AGENTE_SAUDE'}" id="microPanel" style="background: none; border: none;"  
                                             styleClass="container_24 clearfix both">
                                        <h4 class="title">Dados Micro Área</h4>
                                        <p:outputLabel value="Micro Área :" styleClass="grid_3" for="tipoOneMenuMicro" />
                                        <div class="grid_19">
                                            <p:selectOneMenu 
                                                value="#{managerCriarEquipe.profissionalCadastrar.microArea}" id="tipoOneMenuMicro" 
                                                converter="microareaconverter" >  
                                                <f:selectItem  itemValue="" itemLabel=""/>
                                                <f:selectItems value="#{managerCriarEquipe.todasMicroArea()}" var="p" 
                                                               itemLabel="#{p.nome} - #{p.unidade.nome}" itemValue="#{p}"/>  

                                            </p:selectOneMenu> 
                                        </div>

                                    </p:panel>

                                </p:panel>  

                            </p:panel>  
                            <p:panel id="docPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Documentos Pessoais</h4>
                                <p:outputLabel value="Cpf:" styleClass="grid_3" for="cpfInputText" />
                                <p:inputMask mask="999.999.999-99" id="cpfInputText" styleClass="grid_8" 
                                             value="#{ managerCriarEquipe.profissionalCadastrar.cpf }" />
                                <p:outputLabel value="Data Nasc.:" styleClass="grid_3 dataNascLabelImovel" for="dataNascCalendar" 
                                               />
                                <p:calendar id="dataNascCalendar" styleClass="grid_8"
                                            showOn="both" locale="pt" yearRange="1900:2020" 
                                            navigator="true" pattern="dd/MM/yyyy"
                                            value="#{ managerCriarEquipe.profissionalCadastrar.dataNascimento }"/>
                                <p:outputLabel value="Rg:" styleClass="grid_3" for="rgInputText" />
                                <p:inputText  id="rgInputText" styleClass="grid_8" 
                                              value="#{ managerCriarEquipe.profissionalCadastrar.rg }" />
                                <p:outputLabel value="O. Emissor:" styleClass="grid_3" for="emissorInputText" />
                                <p:inputText  id="emissorInputText" styleClass="grid_8" 
                                              value="#{ managerCriarEquipe.profissionalCadastrar.orgaoEmissor }" />
                                <p:outputLabel value="PisPasep :" styleClass="grid_3" for="pisInputText" />
                                <p:inputText  id="pisInputText" styleClass="grid_8" 
                                              value="#{ managerCriarEquipe.profissionalCadastrar.pisPasep }" />
                                <p:outputLabel value="Nacionalidade:" styleClass="grid_3" for="nacionalidadeOneMenu" />
                                <div class="grid_8">
                                    <p:selectOneMenu id="nacionalidadeOneMenu" 
                                                     value="#{ managerCriarEquipe.profissionalCadastrar.nacionalidade}" >
                                        <f:selectItems value="#{ managerCriarEquipe.nacionalidade()}" />
                                    </p:selectOneMenu>
                                </div>

                            </p:panel>
                            <p:panel id="enderecoPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix both ">
                                <h4 class="title">Dados Endereço</h4>

                                <p:outputLabel value="CEP:" styleClass="grid_3" for="cepInputMask" />
                                <p:inputMask id="cepInputMask" styleClass="grid_4" mask="99.999-999" autocomplete="false" 
                                             value="#{managerCriarEquipe.profissionalCadastrar.endereco.cep}"
                                             >
                                    <p:ajax event="blur" process="@this" update=":equipeForm:profissionalTabView:enderecoPanel" 
                                            listener="#{managerCriarEquipe.existeEndereco()}" />
                                </p:inputMask>
                                <p:outputLabel value="* CEP Inválido ( Informe o Logradouro, Bairro, Número )" rendered="#{managerCriarEquipe.mensagemCep}" style="color: red; float: left"  />
                                <div class="clear"/>
                                <p:outputLabel value="Logradouro:" styleClass="grid_3 logradouroLabelImovel" for="patioInputText" />
                                <p:inputText id="patioInputText" styleClass="grid_19" 
                                             readonly="#{managerCriarEquipe.disableEnderecoImovel}"
                                             required="true" requiredMessage="O campo Logradouro é Obrigatório"
                                             value="#{managerCriarEquipe.profissionalCadastrar.endereco.logradouro}" />
                                <div class="clear"/>
                                <p:outputLabel value="Bairro:" styleClass="grid_3" for="neighborhoodInputText" />
                                <p:inputText id="neighborhoodInputText" styleClass="grid_19"
                                             required="true" requiredMessage="O campo bairro é Obrigatório"
                                             readonly="#{managerCriarEquipe.disableEnderecoImovel}"
                                             value="#{ managerCriarEquipe.profissionalCadastrar.endereco.bairro.nome}" />

                                <p:outputLabel value="Número:" styleClass="grid_3" for="numInputText" />
                                <p:inputText id="numInputText" styleClass="grid_4"
                                             value="#{managerCriarEquipe.profissionalCadastrar.endereco.numero}"/>

                                <p:outputLabel value="Complemento:" styleClass="grid_5 alpha" for="compInputText" />
                                <p:inputText id="compInputText" styleClass="grid_10"
                                             value="#{ managerCriarEquipe.profissionalCadastrar.endereco.complemento}"/>

                            </p:panel>

                            <br/>
                            <div class="buttonAction">
                                <p:commandButton value="Salvar" icon="ui-icon-disk"
                                                 update="@this, :equipeForm:profissionalTabView, :equipeForm:profissionalTable"
                                                 process="@this, :equipeForm:profissionalTabView:cadastrarProfissionalTab" 
                                                 actionListener="#{managerCriarEquipe.salvarProfissional()}"
                                                 styleClass="ui-priority-primary" />

                                <p:commandButton oncomplete="dialogProfissional.hide()" process="@this" value="Cancelar"  icon="ui-icon-trash" />
                            </div>
                        </p:tab>

                    </p:tabView> 
                </p:dialog>
                <p:dialog id="dlg" widgetVar="dlg" header="Remover Profissional" dynamic="true"
                          modal="true" appendToBody="false" resizable="false" width="50%" height="200px" draggable="false" closable="false">

                    <h4 class="title">Deseja Remover esse Profissional ?</h4>
                    <div class="buttonAction">
                        <p:commandButton value="Sim" process="@this"  update=":equipeForm:profissionalTable" 
                                         styleClass="ui-priority-primary" oncomplete="dlg.hide()"
                                         actionListener="#{managerCriarEquipe.removerProfissional()}"/>

                        <p:commandButton process=":equipeForm:profissionalTable" oncomplete="dlg.hide()" value="Não" />
                    </div>

                </p:dialog>

            </h:form>
        </ui:define>
    </ui:composition>

</html>
